import React from 'react';
import {Card, Spin, Icon, Alert} from 'antd';

export default class Loading extends React.Component {

    render() {
        const icon = <Icon type="loading" style={{fontSize:24}}/>;
        return (
            <div className="wrap">
                <Card title="Spin用法" className="wrap">
                    <Spin size="small"/>
                    <Spin  style={{margin: '0 10px'}}/>
                    <Spin size="large"/>
                    <Spin indicator={icon} style={{marginLeft:10}} />
                </Card>
                <Card title="内容遮罩" className="wrap">
                    <Alert
                        message="React"
                        description="欢迎来到王者荣耀"
                        type="info"
                    />
                    <Spin>
                        <Alert
                            message="React"
                            description="欢迎来到王者荣耀"
                            type="warning"
                        />
                    </Spin>
                    <Spin tip="加载中...">
                        <Alert
                            message="React"
                            description="欢迎来到王者荣耀"
                            type="info"
                        />
                    </Spin>
                    <Spin tip="加载中..." indicator={icon}>
                        <Alert
                            message="React"
                            description="欢迎来到王者荣耀"
                            type="info"
                        />
                    </Spin>
                </Card>
            </div>
        )
    }
}
